@keyframes scalesV {
  0% {
    transform: translate(-50%, -50%) scale(1.1);
  }

  50% {
    transform: translate(-50%, -50%) scale(0.9);
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

.controls-container {
  @apply w-full relative flex items-center justify-between;
  transition: all 0.5s;
  height: var(--video-pc-height);
  color: rgb(238, 238, 238);
  &.controlsHidden {
    @apply overflow-hidden;
    height: 0px !important;
  }
  &:hover {
    @apply cursor-default;
  }

  // 左侧控制栏
  .controls-menu-left {
    @apply flex h-full w-fit items-center;
    width: 240px;

    .icon {
      @apply h-full flex items-center cursor-pointer shrink-0;
    }

    // 播放音量
    .multifunction-volume {
      @apply relative cursor-pointer flex items-center h-full ml-4 pr-4 h-full z-4;

      .toggleVolume {
        @apply absolute left-2/4 top-2/4 bg-transparent w-10 h-10;
        transform: translate(-50%, -50%);
        font-size: 20px !important;

        & > img {
          @apply w-full h-full object-contain;
        }

        &:hover {
          animation: scalesV 0.3s ease;
        }
      }

      .volume-box {
        @apply absolute left-2/4 w-10 pb-2;
        transform: translateX(-50%);
        line-height: normal;
        bottom: var(--video-pc-height);
        height: 120px;
        border-radius: 3px;
        background-color: rgba(37, 37, 37, 0.85);

        .current-volume {
          @apply w-full h-6 m-0 leading-6 text-center text-xs cursor-default;
        }

        .volume-slider {
          @apply w-1 rounded relative my-0 mx-auto bg-bg66;
          height: 86px;

          &:hover {
            width: 6px;

            .volume-slider-op {
              .volume-slider-op-circle {
                width: 14px;
                height: 14px;
              }
            }
          }

          .volume-slider-op {
            @apply w-full absolute bottom-0 left-0 bg-white rounded z-4;

            .volume-slider-op-circle {
              @apply absolute left-2/4 w-2 h-2 bg-white inline-block;
              top: -5px;
              transform: translateX(-50%);
              border-radius: 50%;
            }
          }

          .volume-slider-mirror {
            @apply w-8 absolute bottom-0;
            height: calc(100% + 5px);
            left: -15px;
            z-index: 2;
          }
        }
      }
    }
  }

  // 右侧控制栏
  .multifunction {
    @apply w-fit h-full flex justify-end items-center;
    width: 240px;

    //分享
    .controls-share {
      @apply w-10 h-10 mr-5 relative;
      .corn {
        @apply absolute left-2/4;
        transform: translateX(-50%);
        width: 18px;
        height: 18px;
        top: -6px;
      }
      .imgShare {
        @apply w-10 h-10 cursor-pointer;
        background-image: url('/images/share.png');
        background-size: 100% 100%;
      }
    }
    // 播放倍速
    .multifunction-multiple {
      @apply relative h-full text-sm flex items-center justify-center mx-2;
      font-family: 'SimHei', '黑体', sans-serif;

      .multiBox {
        @apply w-10 h-10 bg-transparent z-4 flex-row items-end justify-center;
        background-image: url('/images/video/speed.png');
        background-size: 100% 100%;

        & > span {
          @apply text-xs text-white font-semibold m-0;
        }
      }

      .multifunction-multiple-container {
        @apply absolute top-0 left-2/4 w-full h-full;
        transition: all 0.5s;
        transform: translateX(-50%);

        &:hover {
          .multifunction-multiple-layer {
            animation: show 0.3s ease;
          }
        }
      }

      .multifunction-multiple-layer {
        @apply absolute left-2/4 list-none;
        width: 135px;
        height: 308px;
        bottom: var(--video-pc-height);
        transform: translateX(-50%);
        border-radius: 10px;
        background-color: rgba(25, 25, 25, 0.9);

        .speedTitle {
          @apply pl-5 mt-5 text-base text-white;
          line-height: 18px;
          padding-bottom: 10px;
        }

        li {
          @apply text-sm whitespace-nowrap flex items-center w-full h-10;
          padding-left: 25px;
          font-family: Alibaba PuHuiTi 2;

          .vipContent {
            @apply inline-block h-3 leading-3 text-center text-white text-xs ml-1;
            width: 25px;
            background: linear-gradient(90deg, #ffbd8d 0%, #ffe5d8 100%);
            border-radius: 12px;
            border-bottom-left-radius: 0;

            & > span {
              @apply text-xs inline-block;
              line-height: 12px;
              transform: scale(0.83);
              font-family: Alibaba PuHuiTi 2;
              color: #7c3c19;
            }
          }

          &.liActive {
            @apply text-theme;
          }

          &.liVip {
            & > span:nth-child(1) {
              text-transform: uppercase;
              background: linear-gradient(90deg, #ffbd8d 0%, #ffe5d8 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
              text-fill-color: transparent;
            }
          }

          &:hover {
            @apply cursor-pointer;
            background: rgba(255, 255, 255, 0.2);
          }
        }
      }

      &:hover {
        z-index: var(--pop-index);

        .multifunction-multiple-layer {
          z-index: var(--pop-index);
        }
      }
    }

    // 剧集
    .multifunction-definition {
      @apply relative h-full flex items-center mx-2;

      .icon {
        @apply w-10 h-10 bg-transparent;

        & > img {
          @apply w-full h-full object-contain;
        }
      }
    }
    // 全屏
    .multifunction-fullscreen {
      @apply h-full flex items-center mx-2;
      img {
        width: 30px;
      }
    }
  }

  .hover-icon-animate {
    &:hover {
      animation: scaleAnimate 0.5s ease;
    }
  }

  @keyframes scaleAnimate {
    0% {
      transform: scale(1.1);
    }

    50% {
      transform: scale(0.9);
    }

    100% {
      transform: scale(1);
    }
  }
}

@media screen and (max-width: 767px) {
  .controls-container {
    height: var(--video-phone-height);

    // 倍速
    .multifunction-multiple {
      @apply mx-2;

      .multifunction-multiple-container {
        @apply top-3;
      }

      .multiple-layer-phone {
        @apply fixed left-0 right-0  list-none flex items-center px-4 bg-black overflow-x-auto;
        top: 94px;
        height: calc(56.25vmin);
        z-index: var(--pop-index);

        li {
          @apply flex flex-col h-10 justify-center items-center text-xs;
          width: 74px;

          &:not(:first-child) {
            @apply ml-1;
          }

          .vipContent {
            @apply inline-block text-center text-white leading-4 h-4;
            width: 34px;
            background: linear-gradient(90deg, #ffbd8d 0%, #ffe5d8 100%);
            border-radius: 16px;
            border-bottom-left-radius: 0;
          }
        }
      }
    }

    //剧集
    .multifunction-definition {
      @apply mx-2;
    }

    // 播放时间与播放暂停
    .play-pause-timeline {
      .nextIcon {
        @apply pl-2;
      }
    }

    // 右侧控制栏
    .multifunction {
      @apply w-fit;

      //分享
      .controls-share {
        @apply w-8 h-8;
        .corn {
          @apply w-4 h-4;
        }
        .imgShare {
          @apply w-8 h-8;
        }
      }

      // 播放倍速
      .multifunction-multiple {
        .multiBox {
          @apply w-8 h-8;
        }
      }

      // 剧集
      .multifunction-definition {
        @apply relative h-full flex items-center mx-2;

        .icon {
          @apply w-10 h-10 bg-transparent;

          & > img {
            @apply w-full h-full object-contain;
          }
        }
      }
      // 全屏
      .multifunction-fullscreen {
        @apply mx-2;
      }
    }
  }
}
